mixin floder(T)
  - var n = `fileWatcher__`
  - var t = 1;
  while t <= T
    //- 0 每个文件夹的外部容器
    session(class=`${n}eachFloder`)
      //- 1 头部111
      header(class=`${n}floderHeader ${n}newFloder`)
        img(src=icon.src[`文件夹图标`])
        span(class=`${n}eachFloderName`)= t++ +'、xxxxxxxx/'
        div(class=`${n}floderBtnGroup`)
          img(class=`${n}btnSelOpenFloder` src=icon.src[`打开文件夹`])
          img(class=`${n}btnCloseFloder` src=icon.src[`关闭按钮`])

      //- 子文件夹
      div(class=`${n}floderContent`)
        //- 0每个文件的外部容器

        div(class=`${n}eachFile`)
          //- 1对应格式的icon图标
          span(class=`${n}eachFileIcon`)

            //- 1.1 icon容器
            img(src=icon.src[`docx`])

          //- 2对应文件名
          span(class=`${n}eachFileName`)= 'xxxxxxxxxxxxxxxxxxxxxxxname'

          //- 3对应文件关键信息
          span(class=`${n}eachFileSize`)= '99p'

        div(class=`${n}eachFile`)
          span(class=`${n}eachFileIcon`)
            img(src=icon.src[`xlsx`])
          span(class=`${n}eachFileName`)= 'xxxxxxxxxxxxxxxxxxxxxxname'
          span(class=`${n}eachFileSize`)= '99p'
        div(class=`${n}eachFile`)
          span(class=`${n}eachFileIcon`)
            img(src=icon.src[`pdf`])
          span(class=`${n}eachFileName`)= 'xxxxxxxxxxxxxxxxxxxxxxname'
          span(class=`${n}eachFileSize`)= '99p'
        div(class=`${n}eachFile`)
          span(class=`${n}eachFileIcon`)
            img(src=icon.src[`pdf`])
          span(class=`${n}eachFileName`)= 'xxxxxxxxxxxxxxxxxxxxxxname'
          span(class=`${n}eachFileSize`)= '99p'
        div(class=`${n}eachFile`)
          span(class=`${n}eachFileIcon`)
            img(src=icon.src[`ppt`])
          span(class=`${n}eachFileName`)= 'xxxxxxxxxxxxxxxxxxxxxxname'
          span(class=`${n}eachFileSize`)= '99p'
        div(class=`${n}eachFile`)
          span(class=`${n}eachFileIcon`)
            img(src=icon.src[`img`])
          span(class=`${n}eachFileName`)= 'xxxxxxxxxxxxxxxxxxxxxxname'
          span(class=`${n}eachFileSize`)= '99p'

      //- 文件夹详细简要
      footer(class=`${n}floderFooter`)
        //- 文件小图标
        div(class=`${n}word`)
          //- 对应格式的icon
          img(src=icon.src[`doc`])
          //- 该格式的文件数量
          span 99

        div(class=`${n}excel`)
          img(src=icon.src[`xlsx`])
          span 99
        div(class=`${n}pdf`)
          img(src=icon.src[`pdf`])
          span 99
        div(class=`${n}ppt`)
          img(src=icon.src[`ppt`])
          span 99
        div(class=`${n}img`)
          img(src=icon.src[`img`])
          span 99

block fileList
  - var n = `fileWatcher__`
  //- 文件列表
  div(class=`${n}fileList`)

    //- 文件列表 - 文件夹名
    div(class=`${n}title`)!= icon.svg[`打开文件夹`]
      span(id=`${n}title`) 2222222/

    //- 文件列表 - 文件夹路径
    div(class=`${n}dirname` id=`${n}dirname`)= 'xxxx_xxxx_xxx/xxxx/xx/x/x/x/xxxxx/xxxx/xxxx/xxxxxx'

    //- 文件列表 - 文件夹内容列表
    div(class=`${n}content` id=`${n}content`)
      +floder(20)